<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>列表页-荔枝博客</title>
  <link rel="icon" th:href="@{/blog/images/favicon.ico}" type="image/ico">
  <meta name="keywords" content="blog" />
  <meta name="description" content="blog" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link th:href="@{/blog/css/base.css}" rel="stylesheet">
  <link th:href="@{/blog/css/m.css}" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
  <script th:src="@{/blog/js/comm.js}"></script>
  <!--[if lt IE 9]>
  <script th:src="@{/blog/js/modernizr.js}"></script>
  <![endif]-->
</head>
<body>
<!--top begin-->
<header th:replace="blog/header::header-fragment"></header>
<!--top end-->
<article> 
  <!--lbox begin-->
  <div class="lbox">
    <div class="whitebg lanmu"> <img th:src="@{/blog/images/lm01.jpg}">
      <h1>文章专栏</h1>
      <p>文章专栏，记录一些学习笔记和在学习过程中遇到的问题。</p>
    </div>
    <div class="whitebg bloglist">
      <h2 class="htitle">文章专栏</h2>
      <ul>
        <!--多图模式 置顶设计-->
        <!--<li>-->
          <!--<h3 class="blogtitle"><a href="/" target="_blank"><b>【顶】</b>别让这些闹心的套路，毁了你的网页设计!</a></h3>-->
          <!--<span class="bplist"><a href="/"> <img src="images/b02.jpg" alt=""></a> <a href="/"><img src="images/b03.jpg" alt=""></a> <a href="/"><img src="images/b04.jpg" alt=""> </a><a href="/"><img src="images/b05.jpg" alt=""> </a></span>-->
          <!--<p class="blogtext">如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if 来判断，输出。思路已打开，样式调用就可以多样化啦！... </p>-->
          <!--<p class="bloginfo"><i class="avatar"><img src="images/avatar.jpg"></i><span>杨青青</span><span>2018-10-28</span><span>【<a href="/">原创模板</a>】</span></p>-->
        <!--</li>-->
        <!--单图-->
        <li th:each="blog : ${listBlogPage.list}">
          <a th:href="@{/blog/{id}(id=${blog.id})}" target="_blank"><h3 class="blogtitle">[[${blog.title}]]</h3></a>
          <span class="blogpic imgscale"><i><a th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.flag} == 1 ? '原创' : '转载'"></a></i><a th:href="@{/blog/{id}(id=${blog.id})}" title=""><img th:src="@{${blog.firstPicture}}" alt=""></a></span>
          <p class="blogtext" th:text="${blog.description}"></p>
          <p class="bloginfo"><i class="avatar"><img th:src="@{${blog.user.avatar}}"></i><span th:text="${blog.user.nickname}"></span><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span><span>【<a href="/" th:text="${blog.type.name}" ></a>】</span></p>
          <a th:href="@{/blog/{id}(id=${blog.id})}" class="viewmore">阅读更多</a>
        </li>

      </ul>
      <!--pagelist-->
      <div class="pagelist">
        <a title="Total record">&nbsp;<b>[[${listBlogPage.total}]]</b></a>&nbsp;&nbsp;&nbsp;
        <a th:href="@{/list/(pageNum=${listBlogPage.prePage})}" th:if="${listBlogPage.hasPreviousPage}" >上一页</a>&nbsp;
        <b th:text="${listBlogPage.pageNum}"><a th:href="@{/list/(pageNum=${listBlogPage.nextPage})}" ></a></b>&nbsp;
        <a th:href="@{/list/(pageNum=${listBlogPage.pageNum + 1})}" th:if="${listBlogPage.hasNextPage}" >[[${listBlogPage.pageNum + 1}]]</a>&nbsp;
        <a th:href="@{/list/(pageNum=${listBlogPage.nextPage})}" th:unless="${listBlogPage.isLastPage}">下一页</a>
        <a th:href="@{/list/(pageNum=${listBlogPage.pages})}" th:unless="${listBlogPage.isLastPage}" >尾页</a>&nbsp;
      </div>      <!--pagelist end-->
    </div>
    
    <!--bloglist end--> 
  </div>
  <div class="rbox">
    <div th:replace="blog/sider::sider-fragment"></div>
  </div>
</article>
<footer th:replace="blog/footer::footer-fragment"></footer>
</body>
</html>
